<!DOCTYPE html>
<html style="background:#2251d1">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>竞猜</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/guessing.css"/>

</head>
<body >
    <div id="blank" class="header">
        <div id="back" v-back.tapmode class="back"></div>
        <span class="title">竞猜</span>
    </div>
<div id="app" class="container" style="padding-top: 60px;" v-cloak> 
    <div class="content">
        <div class="now">
            <h2><span>队伍竞猜</span><span class="join">参与投票，若队伍获胜即可瓜分奖池</span>
                </h2>
            <div class="detail">
                <h3 style="padding-top: 10px;">本场奖池：<span class="polvalues">{{infos.polvalues}}CC</span> <i class="logo-sprite" style="background-position: 0px -1005px;"></i></h3>
                        <div class="titlecontainer" style="font-size: 20px;font-weight: 600;text-align: center;margin-top: 15px">{{infos.title}}</div>
                <div class="logo clearfix">
                    <div class="logoa">
                        <div class="pic"><img class="teamimage1" alt="" :src="infos.image1"></div>
                        <p class="team1">{{infos.team1}}</p>
                    </div>
                    <div class="logob"><img src="../../image/vs.png" alt="">
                    </div>
                    <div class="logoa">
                        <div class="pic"><img class="teamimage2" alt="" :src="infos.image2"></div>
                        <p class="team2">{{infos.team2}}</p>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div class="result">
                    <div class="win win1" v-bind:class="{'active':infos.isvote==1&&infos.choose==1}">
                        <p class="teambottom1" v-myclick="[1,vote]">{{infos.team1}} 胜</p><span class="teamrate1">(支持率：{{infos.rate1}}%)</span>
                    </div>
                    <div class="win active" style="width:28%;margin:0px 2%">
                        <p class="polmember" style="font-size: 16px;" v-show="Number(infos.time)<Number(Date.parse(new Date())/1000)||infos.state==1">已结束</p>
                        <p class="polmembertext" style="font-size: 16px;" v-show="!(Number(infos.time)<Number(Date.parse(new Date())/1000)||infos.state==1)">{{infos.totalnumber}}</p>
                    </div>
                    <div class="win win2" v-bind:class="{'active':infos.isvote==1&&infos.choose==2}">
                        <p class="teambottom2" v-myclick="[2,vote]">{{infos.team2}} 胜</p><span class="teamrate2">(支持率：{{infos.rate2}}%)</span>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            <!-- <div style="margin-top:20px;text-align:center;color: red;font-size: 13px">登记后投票请点击左或右边队伍</div> -->
            </div>
        </div>
        <div class="nextinfo">
            <h2>精彩预告</h2>
            <div class="nextdiv" v-for="(content, index) in netxlists">
                <div style="text-align: center;color: #fff;font-size: 14px;"><span style="font-size: 20px;margin-right: 15px">{{content.title}}</span><span class="nexttime">{{timestampToTime(content.begintime)}}</span></div>    
                <div class="log">
                    <div >
                        <div class="loga"><img alt=""
                                :src="content.image1" class="nextteamimage1"></div>
                        <p class="nextteam1">{{content.team1}}</p>
                    </div>
                    <div class="logb"><img src="../../image/vs.png" alt=""></div>
                    <div>
                        <div class="loga"><img alt=""
                                :src="content.image2" class="nextteamimage2"></div>
                        <p class="nextteam2">{{content.team2}}</p>
                    </div>
                </div>
            </div>                                               
         </div>
        <div class="rank">
            <div class="rankT">
                <h3>竞猜排行榜</h3>
            </div>
            <ul class="ranklist" style="background: rgb(26, 71, 194);">
                <li :class="'color'+(index%2 ==0?1:2)" v-for="(content, index) in ranks">
                    <img  src="../../image/rew1.png" alt="" class="rew" v-show="index==0">
                    <img  src="../../image/rew2.png" alt="" class="rew" v-show="index==1">
                    <img  src="../../image/rew3.png" alt="" class="rew" v-show="index==2">
                    <span style="width: 24px; text-align: center;" v-show="index>2">{{index+1}}</span>
                    <div style="margin-left:20px">
                    <p class="name" style="margin-bottom: 11px; font-weight: bold;">{{content.nickname}}</p>
                    <div class="det">共瓜分了<span>{{content.awardvalues}}</span>CC币</div>
                    </div>
</li>
</ul>
        </div>
    </div>
    </div>
</body>
<script src="../../script/vue.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/swiper.js"></script>

<script>

    var infos,
    ranks,
    netxlists,
        vm;

    apiready = function () {
        setBSImg();
        showProgress();
        new Vue({
            el: '#blank'
        });
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var infos = ret.content;
            console.log(JSON.stringify(infos));
            initApp(infos);
            getnextlist();
            getranklist();
            api.parseTapmode();
        };
        pinet.post(URL.getinfo, data, callback);
        // setRefreshHeaderInfo(refresh);
    };

    function initApp(infos) {
        vm = new Vue({
            el: "#app",
            data: {
                infos: infos,
                BSImg: Vue.BSImg,
                ranks:ranks,
                netxlists:netxlists,
                key:0
            },
            methods: {
                vote: function (index) {
                    if(Number(this.infos.time)<Number(Date.parse(new Date())/1000)||this.infos.state==1){
                        api.toast({
                            msg:'活动已结束,请等待下一场哦！'
                        })
                        return false;
                    }
                    if(this.infos.isvote==1){
                        api.toast({
                            msg:'本场您已参与投票,请等待开奖哦！'
                        })
                        return false;
                    }
                    var data = {
                        member_id: getPrefs('member_id'),
                        proid:this.infos.id,
                        choose:index
                    };
                    var callback = function (ret) {
                        vm.infos.isvote = 1;
                        vm.infos.choose = index;
                        vm.infos.totalnumber++;
                        getpro();
                    };
                    pinet.post(URL.votepro, data, callback);
                },
            },
        })
    }
 function getranklist(){
    var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var ranks = ret.content;
            vm.ranks = ranks;
        };
        pinet.post(URL.getrank, data, callback);
 }
 function getnextlist(){
    var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var netxlists = ret.content;
            vm.netxlists = netxlists;
            console.log(JSON.stringify(netxlists))
        };
        pinet.post(URL.nextpro, data, callback);
 }
 function getpro(){
    var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var reinfos = ret.content;
            vm.infos=reinfos;
        };
        pinet.post(URL.getinfo, data, callback);
 }
 function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return M + D + h + m + s;
    }
</script>
</html>
